<template>
	<view class="evaluate_center_page">
		
		<view class="tabs_ordere_list">
			
			<view class="item_tab" style="width: 50%;" :class="currentIndex === item.id ? 'active' : ''" v-for="(item, index) in tabdata" :key="item.id" @click="handleTab(item.id)">
				<view class="tabs_text">
					<view class="txt_1">{{item.title}}</view>
				</view>
			</view>
			
		</view>
		
		<view class="evaluate_area_block_1" v-for="(item, index) in 2" :key="index">
			
			<view class="pt20 pb20 bb1 flex_box aic">
				
				<view class="item ov">
					<view class="df aic fs24 cor_666">
						<view class="mr10">XC202505121623573598937312</view>
						<up-copy content="XC202505121623573598937312">
							<view class="fs24">[复制]</view>
						</up-copy>
					</view>
				</view>
				<view class="fs24 cor_333">未评价</view>
			</view>
			<view class="mt24 flex_box">
				<view class="re mr15"><image src="@/static/images/banner_01.png" class="pic_size"></image></view>
				<view class="item ov">
					<view class="df hp100 fldc jcsb">
						<view class="flex_box aic">
							<view class="item ov"><view class="fs28 fwb cor_333 clamp_2">塞尔达 荒野之息</view></view>
							<view class="ml10 fs32 cor_999">¥ 238元</view>
						</view>
						<view class="flex_box aic fs24 cor_999">
							<view class="item ov"><view class="clamp_1">裸卡简装，中文，非国行</view></view>
							<view class="">X1</view>
						</view>
						<view class="fs24 cor_999">下单日期：2025-05-12</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	
	const currentIndex = ref(0);
	const tabdata = ref([
		{ id: 0, title: '待评价' },
		{ id: 1, title: '已评价' }
	]);
	
	const handleTab = (id) => {
		currentIndex.value = id;
	};
	
</script>

<style lang="scss" scoped>
	
	.evaluate_center_page {
		position: relative;
		min-height: 100vh;
		padding: 24rpx;
		padding-bottom: calc(30rpx + content(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		background: linear-gradient(90deg, #FFEEEE 0%, #f6f6f6 90.99%);
		.evaluate_area_block_1 {
			position: relative;
			padding: 0 32rpx 40rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 32rpx;
			.pic_size {
				position: relative;
				width: 200rpx;
				height: 124rpx;
				border-radius: 16rpx;
				vertical-align: middle;
			}
			.tips_area {
				position: relative;
				padding: 16rpx;
				font-size: 24rpx;
				line-height: 32rpx;
				color: #FF594A;
				background: #FCEDED;
				border-radius: 12rpx;
			}
		}
	}

</style>
